<template>
	<view class="box">
		<view class="title">
			{{ subject }}组卷题量设置
		</view>
		<view class="boxitem" @click="choosenum('tian')">
			填空题数量：<text>{{ tiannum }}</text>
		</view>
		<view class="boxitem" @click="choosenum('duo')">
			多选题数量：<text>{{ duonum }}</text>
		</view>
		<view class="boxitem" @click="choosenum('dan')">
			单选题数量：<text>{{ dannum }}</text>
		</view>
		<view class="boxitem" @click="choosenum('pan')">
			判断题数量：<text>{{ pannum }}</text>
		</view>
		<button type="primary" @click="group">创建组卷</button>
		<button plain @click="random">随机题量</button>
	</view>
</template>

<script>
	import { creategroup } from '../../apis/questionAPI.js'
	export default {
		data() {
			return {
				subject: '',
				tiannum: 3,
				duonum: 3,
				dannum: 3,
				pannum: 3
			};
		},
		onLoad(option) {
			this.subject = option.subject
		},
		methods: {
			// 设置题量
			choosenum (str) {
				let that = this
				const itemList = [1,2,3,4,5]
				uni.showActionSheet({
					itemList,
					success: function (res) {
						that[`${str}num`] = itemList[res.tapIndex]
						// console.log(res)
					},
					// fail: function (res) {
					// 	console.log(res.errMsg);
					// }
				})
			},
			// 随机题量
			random() {
				this.tiannum = Math.floor(Math.random() * 6)
				this.dannum = Math.floor(Math.random() * 6)
				this.duonum = Math.floor(Math.random() * 6)
				this.pannum = Math.floor(Math.random() * 6)
			},
			// 新建组卷
			group() {
				let that = this
				// console.log(this)
				creategroup({
					username: uni.getStorageSync('token'),
					subject: this.subject,
					tiannum: this.tiannum,
					duonum: this.duonum,
					dannum: this.dannum,
					pannum: this.pannum
				}).then(res => {
					const num = that.tiannum + that.duonum + that.dannum + that.pannum
					uni.redirectTo({
						url: `/pages/exercise/exercise?type=组卷&subject=${that.subject}&num=${num}&isnew=0`
					})
				})
			}
		}
	}
</script>

<style lang="less">
	.box {
		position: relative;
		box-sizing: border-box;
		width: 94vw;
		background-color: #f8f8f8;
		padding: 2vw;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 10px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, 30%);
		
		.title {
			font-size: 2.8vh;
			font-weight: bold;
			text-align: center;
			margin: 3vh;
		}
		
		.boxitem {
			text-align: center;
			margin: 2vh;
			font-size: 2.5vh;
			
			text {
				font-weight: bold;
			}
		}
		
		button {
			margin: 2vh 0;
		}
	}
</style>
